
// 柱状图
option = {
    title: {
        text: '每月收入'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['当前每月收入', '同期每月收入']
    },
    toolbox: {
        show: true,
        feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
        }
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '当前每月收入',
            type: 'bar',
            data: [2550, 1550, 1600, 3350, 4750, 3500, 1600, 2500, 2250, 1750, 3850, 1750],
            color:"rgba(130,155,222)"
        },
        {
            name: '同期每月收入',
            type: 'bar',
            data: [2050, 1600, 1950, 3000, 4000, 3750, 1750, 2000, 2850, 2150, 3750, 3650],
            color:"rgba(195,231,255)"
        }
    ]
};




// 折线图
options = {
    title: {
        text: '今日&昨日',
        left: '50%',
        textAlign: 'center'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            lineStyle: {
                color: '#ddd'
            }
        },
        backgroundColor: 'rgba(255,255,255,1)',
        padding: [5, 10],
        textStyle: {
            color: '#7588E4',
        },
        extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
    },
    legend: {
        right: 20,
        orient: 'vertical',
        data: ['每年收入走势','每年同期收入走势']
    },
    xAxis: {
        type: 'category',
        data: [2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020],
        boundaryGap: false,
        splitLine: {
            show: true,
            interval: 'auto',
            lineStyle: {
                color: ['#D4DFF5']
            }
        },
        axisTick: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#609ee9'
            }
        },
        axisLabel: {
            margin: 10,
            textStyle: {
                fontSize: 14
            }
        }
    },
    yAxis: {
        type: 'value',
        splitLine: {
            lineStyle: {
                color: ['#D4DFF5']
            }
        },
        axisTick: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#609ee9'
            }
        },
        axisLabel: {
            margin: 10,
            textStyle: {
                fontSize: 14
            }
        }
    },
    series: [{
        name: '每年收入走势',
        type: 'line',
        smooth: true,
        showSymbol: false,
        symbol: 'circle',
        symbolSize: 6,
        data: [50,55,60,40,45,40,65,40,68,20,72,60],
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(199, 237, 250,0.5)'
                }, {
                    offset: 1,
                    color: 'rgba(199, 237, 250,0.2)'
                }], false)
            }
        },
        itemStyle: {
            normal: {
                color: 'rgba(91,211,0)'
            }
        },
        lineStyle: {
            normal: {
                width: 3
            }
        }
    }, {
        name: '每年同期收入走势',
        type: 'line',
        smooth: true,
        showSymbol: false,
        symbol: 'circle',
        symbolSize: 6,
        data: [47,50,52,48,40,38,65,45,58,30,72,58],
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(216, 244, 247,1)'
                }, {
                    offset: 1,
                    color: 'rgba(216, 244, 247,1)'
                }], false)
            }
        },
        itemStyle: {
            normal: {
                color: 'rgba(142,143,135)'
            }
        },
        lineStyle: {
            normal: {
                width: 3
            }
        }
    }]
};